<template>
  <div>
    <el-row style="margin-bottom:10px">
      <el-col :span="5">
        <el-button type="primary" size="medium">修改</el-button>
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
          size="medium"
          >创建</el-button
        >
        <el-button
          type="danger"
          @click="centerDialogVisible = true"
          size="medium"
          >停用</el-button
        >
        <el-button type="primary" size="medium">启用</el-button>
      </el-col>

      <el-col :span="9"> </el-col>

      <el-col :span="10">
        <el-select v-model="value">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          style="width:240px"
          placeholder="请输入模板编号或者模板名称"
        ></el-input>
        <el-button size="medium">搜索</el-button>
        <el-button size="medium">高级检索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="templatenum" label="模板编号" width="100">
        </el-table-column>
        <el-table-column prop="templatename" label="模板名称" width="200">
        </el-table-column>
        <el-table-column prop="editor" label="编辑人"> </el-table-column>
        <el-table-column prop="dateofapproval" label="审核日期">
        </el-table-column>
        <el-table-column prop="businessnum" label="绑定业务流数量">
        </el-table-column>
        <el-table-column prop="version" label="版本号"> </el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >查看详细</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="15"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-row>

    <!-- 停用模板 -->
    <el-dialog
      title="停用模板"
      v-model="centerDialogVisible"
      width="24%"
      destroy-on-close
      center
    >
      <h3>注意事项:</h3>
      <p>
        1、停用后,调用该模板的启用业务流将受到影响导致停用,无法发起新的业务流
      </p>
      <p>2、停用不影响过往使用该模板的业务量查看</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false" type="danger"
            >确认停用</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 创建 -->
    <el-dialog title="创建模板" v-model="dialogFormVisible" width="35%"
    center
    >
      <el-form :model="form">
        <el-form-item label="模板编号" :label-width="formLabelWidth">
          mb0001
        </el-form-item>
        <el-form-item label="模板名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="节点名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="模板说明" :label-width="formLabelWidth">
          <el-input v-model="form.region" type="textarea" :rows="4"> </el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
            注:以上内容可在模板属性中更改
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">全新创建</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >选择已有为基础创建</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          templatenum: "mb0011",
          templatename: "出彩报销单据",
          editor: "官方运营人员",
          dateofapproval: "20211023",
          businessnum: 1,
          status: "启用",
        },
        {
          templatename: "预设模板-出差报销单据",
          status: "停用",
        },
        {},
        {},
        {},
        {},
        {},
      ],
      multipleSelection: [],
      options: [
        {
          value: "选项1",
          label: "显示全部",
        },
        {
          value: "选项2",
          label: "只显示启用",
        },
        {
          value: "选项3",
          label: "只显示停用",
        },
        {
          value: "选项4",
          label: "只显示审核中",
        },
        {
          value: "选项5",
          label: "只显示审核拒绝",
        },
        {
          value: "选项6",
          label: "只显示待启用",
        },
      ],
      value: "只显示停用",
      currentPage: 1,
      centerDialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
      },
      formLabelWidth: "80px",
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
  },
};
</script>
